<!-- 商品分类 -->
<template>
  <div>
    <HeadNav></HeadNav>
    <div class="bodymain">
      <SearchBar></SearchBar>
      <div class="classtip-container">
        <div class="classtipmain">
          <div 
            v-for="(item, index) in categoryList" 
            :key="index" 
            class="classtipbox"
            :class="{ 
              active: activeIndex === index,
              selected: selectedIndex === index 
            }"
            @mouseover="activeIndex = index"
            @mouseout="activeIndex = -1"
            @click="selectItem(index, item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <!-- 商品展示区 -->
      <div>
        <SubtotalGoods 
          :category="currentCategory" 
          :category-id="currentCategoryId"
        ></SubtotalGoods>
      </div>
    </div>
  </div>
</template>

<script>
import HeadNav from '../components/HeadNav.vue'
import SearchBar from '../components/SearchBar.vue'
import SubtotalGoods from '../components/SubtotalGoods.vue'
import request from '../utils/request.js'

export default {
  components: {
    HeadNav,
    SearchBar,
    SubtotalGoods
  },
  data() {
    return {
      categoryList: [],
      activeIndex: -1,
      selectedIndex: 0, // 默认选中第一个（索引0）
      currentCategory: "", // 初始为空，从数据库获取后自动设置
      currentCategoryId: 0
    }
  },
  created() {
    this.findclassfiction();
  },
  methods: {
    selectItem(index, item) {
      this.selectedIndex = index;
      this.currentCategory = item.name;
      this.currentCategoryId = item.category_id;
    },
    // 获取分类导航信息
    findclassfiction() {
      request.get("/classify/findClassify").then(res => {
        if (res.code === '200') {
          this.categoryList = res.data;
          // 默认选中第一个分类（数据库的第一个就是“猜你喜欢”）
          if (this.categoryList.length > 0) {
            this.currentCategory = this.categoryList[0].name;
            this.currentCategoryId = this.categoryList[0].category_id;
          }
          this.$message({
            message: '查询成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '未找到分类',
            type: 'error'
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.classtip-container {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 15px;
}

.classtipmain {
  display: flex;
  gap: 40px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.classtipmain::-webkit-scrollbar {
  display: none;
}

.classtipbox {
  font-size: 18px;
  color: black;
  cursor: pointer;
  padding: 5px 0;
  white-space: nowrap;
  transition: all 0.3s ease;
  position: relative;
}

/* 悬停效果 */
.classtipbox:hover {
  color: #666;
}

.classtipbox:hover::after,
.classtipbox.active::after,
.classtipbox.selected::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #999;
  transform: scaleX(1);
}

/* 默认状态（无下划线） */
.classtipbox::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #999;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

/* 选中状态（保持下划线） */
.classtipbox.selected {
  color: #666;
}

/* 选中状态的下划线（无需动画） */
.classtipbox.selected::after {
  transition: none;
}
</style>